@attribute [Authorize(Roles="Employee")]
@inherits AppAuthComponentBase

<form @onsubmit="submit" @onsubmit:preventDefault>
<CascadingValue Value=@api.Error>
<div class=@ClassNames("shadow overflow-hidden sm:rounded-md bg-white dark:bg-black", @class)>
    
    <div class="relative px-4 py-5 bg-white dark:bg-black sm:p-6">

        <CloseButton OnClose="close" />

        <fieldset>
            <legend class="text-base font-medium text-gray-900 dark:text-gray-50 text-center mb-4">New Booking</legend>

            <ErrorSummary Except=@VisibleFields />

            <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6 sm:col-span-3">
                    <TextInput @bind-Value="request.Name" required placeholder="Name for this booking" />
                </div>

                <div class="col-span-6 sm:col-span-3">
                    <SelectInput @bind-Value="request.RoomType" Options=@(Enum.GetValues<RoomType>()) /> 
                </div>

                <div class="col-span-6 sm:col-span-3">
                    <TextInput type="number" @bind-Value="request.RoomNumber" min="0" required />
                </div>

                <div class="col-span-6 sm:col-span-3">
                    <TextInput type="number" @bind-Value="request.Cost" min="0" required />
                </div>

                <div class="col-span-6 sm:col-span-3">
                    <DateTimeInput @bind-Value="request.BookingStartDate" required />
                </div>
                <div class="col-span-6 sm:col-span-3">
                    <DateTimeInput @bind-Value="request.BookingEndDate" />
                </div>
    
                <div class="col-span-6">
                    <TextAreaInput @bind-Value="request.Notes" placeholder="Notes about this booking" class="h-20" />
                </div>
            </div>
        </fieldset>
    </div>

    <div class="mt-4 px-4 py-3 bg-gray-50 dark:bg-gray-900 text-right sm:px-6">
        <div class="flex justify-between items-center">
            <SrcLink href="https://github.com/NetCoreTemplates/blazor-tailwind/blob/master/MyApp.Client/Pages/BookingsCrud/Create.razor" 
                     IconSrc="/img/blazor.svg" class="mt-2" />
            <div>
                <PrimaryButton type="submit">
                    Create Booking
                </PrimaryButton>
            </div>
        </div>
    </div>

</div>
</CascadingValue>
</form>

@code {
    [Parameter] public EventCallback<IdResponse> done { get; set; }

    CreateBooking request = new()
    {
        BookingStartDate = DateTime.UtcNow,
    };

    // Hide Error Summary Messages for Visible Fields which displays contextual validation errors
    string[] VisibleFields => new[] {
        nameof(request.Name),
        nameof(request.RoomType),
        nameof(request.RoomNumber),
        nameof(request.BookingStartDate),
        nameof(request.BookingEndDate),
        nameof(request.Cost),
        nameof(request.Notes),
    };

    ApiResult<IdResponse> api = new();

    async Task submit()
    {
        api = await ApiAsync(request);

        if (api.Succeeded)
        {
            await done.InvokeAsync(api.Response!);
            request = new();
        }
    }

    async Task close() => await done.InvokeAsync(null);
}
